<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="shortcut icon" href="#" />
  <link rel="stylesheet" type="text/css" href="{{pluResPath}}html/ledgerCount/ledgerCount.css" />
  <link rel="preload" href="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js" as="script" />
  <link rel="preload" href="{{resPath}}font/tttgbnumber.ttf" as="font">
  <link rel="preload" href="{{pluResPath}}img/other/logo.png" as="image">
  {{@headStyle}}
</head>

<body>
  <div class="container" id="container">
    <div class="head_box">
      <div class="id_text">ID: {{uid}}</div>
      <h2 class="day_text">{{yearText}}星琼统计</h2>
      <img class="genshin_logo" src="{{pluResPath}}img/other/logo.png" />
    </div>
    <div class="data_box">
      <div class="tab_lable">数据总览</div>
      <div class="data_line">
        <div class="data_line_item">
          <div class="num">{{allPrimogemsShow}}</div>
          <div class="lable">总星琼</div>
        </div>
        <div class="data_line_item">
          <div class="num">{{allGacha}}抽</div>
          <div class="lable">总抽数</div>
        </div>
        <div class="data_line_item">
          <div class="num">{{maxPrimogems.month}}月</div>
          <div class="lable">星琼最多</div>
        </div>
        <div class="data_line_item">
          <div class="num">{{maxPrimogems.value}}</div>
          <div class="lable">{{maxPrimogems.month}}月星琼</div>
        </div>
      </div>
      <div class="data_line">
        <div class="data_line_item">
          <div class="num">{{allMora}}</div>
          <div class="lable">总专&通票</div>
        </div>
        <div class="data_line_item">
          <div class="num">{{maxMora.month}}月</div>
          <div class="lable">专&通票最多</div>
        </div>
        <div class="data_line_item">
          {{if group_by.length>0 }}
          <div class="num">{{group_by[0].num}}</div>
          <div class="lable">{{group_by[0].action}}</div>
          {{/if}}
        </div>
        <div class="data_line_item">
          {{if group_by.length>0 }}
          <div class="num">{{group_by[1].num}}</div>
          <div class="lable">{{group_by[1].action}}</div>
          {{/if}}
        </div>
      </div>
    </div>
    <div class="data_box">
      <div class="tab_lable">月份统计</div>
      <div id="chartContainer"></div>
    </div>
    <div class="data_box">
      <div class="tab_lable">详细统计</div>
      <div id="chartContainer2"></div>
    </div>
    {{if hasMore }}
    <div class="hasMore">*该数据只显示最近12个月</div>
    {{/if}}
    <div class="logo">Created By Miao-Yunzai</div>
  </div>
</body>

<script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
<script>
  const { Column, Pie } = G2Plot;

  const primogemsMonth = JSON.parse(`{{@ primogemsMonth}}`);
  const primogemsMax = {{ maxPrimogems.value }};
  const stackedColumnPlot = new Column("chartContainer", {
    data: primogemsMonth,
    isGroup: true,
    xField: "month",
    yField: "value",
    seriesField: "name",
    animation: false,
    renderer: "svg",
    padding: [40, 10, 30, 52],
    label: {
      position: "top",
      style: {
        fontFamily: "tttgbnumber",
      },
      offsetY: 10,
    },
    xAxis: {
      label: {
        autoHide: false,
        formatter: (v) => {
          return v + "月";
        },
        style: {
          fontFamily: "tttgbnumber",
          fontSize: 14,
        },
      },
    },
    yAxis: {
      label: {
        style: {
          fontFamily: "tttgbnumber",
          fontSize: 14,
        },
      },
    },
  });
  stackedColumnPlot.render();

  const countdata = JSON.parse(`{{@ pieData}}`);
  const piePlot = new Pie("chartContainer2", {
    renderer: "svg",
    animation: false,
    data: countdata,
    appendPadding: 10,
    angleField: "num",
    colorField: "action",
    radius: 1,
    innerRadius: 0.7,
    // appendPadding: 20,
    color: JSON.parse(`{{@ color}}`),
    meta: {
      // num: {
      //   formatter: (v) => `${v}`,
      // },
    },
    label: {
      type: "inner",
      offset: "-50%",
      autoRotate: false,
      style: {
        textAlign: "center",
        fontFamily: "tttgbnumber",
      },
      formatter: ({ percent }) => {
        percent = (percent * 100).toFixed(0);
        return percent >= 2 ? `${percent}%` : "";
      },
    },
    statistic: {
      title: {
        offsetY: -8,
        content: "总计",
      },
      content: {
        style: {
          fontFamily: "tttgbnumber",
        },
      },
    },
    legend: {
      offsetX: -56,
      itemValue: {
        formatter: (text, item) => {
          const items = countdata.filter((d) => d.action === item.value)[0];
          return items.num;
        },
        style: {
          opacity: 0.65,
          fontFamily: "tttgbnumber",
          "fontSize": 16,
        },
      },
      itemName: {
        style: {
          "fontSize": 16,
        },
      }
    },
  });
  piePlot.render();
</script>

</html>